<template>
	<view class="content-item">
		<view class="head flex">
			<image class="avatar" :src="$mConfig.imageUrl + '/logo.png'" mode="aspectFit"></image>
			<view class="userinfo flex-1">
				<view class="userinfo-name">
					张潇潇
				</view>
				<view class="userinfo-bot">
					<text class="t1">入职企业：</text> <text class="t2">10山东智能制造有限公司</text>
				</view>
			</view>
		</view>
		<view class="career">
			<view class="career-top flex">
				<view class="career-flex flex-1">
					<view class="career-item flex">
						<view class="career-item-label">
							入职时间：
						</view>
						<view class="career-item-value">
							2024-3-12
						</view>
					</view>
				</view>

				<view class="career-flex">
					<view class="career-item flex">
						<view class="career-item-label">
							离职时间：
						</view>
						<view class="career-item-value">
							2024-3-12
						</view>
					</view>
				</view>
			</view>
			<view class="career-top flex">
				<view class="career-flex flex-1">
					<view class="career-item flex mb">
						<view class="career-item-label">
							{{curTab==0?'离职原因':'退回原因'}}：
						</view>
						<view class="career-item-value">
							找到新工作了，干沟了不想干了
						</view>
					</view>
				</view>
			</view>
			<view class="career-btn flex flex-row-reverse">
				<view class="btn btn3" v-show="curTab==0" @tap="toDetail(3)">
					批准离职
				</view>
				<view class="btn btn2" @tap="toDetail(2)">
					考勤表
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			curTab: {
				default: 0
			}
		},
		methods: {
			toDetail(type) {
				this.$emit('clickBtn', type);
			},
			statusLabel() {
				return "已借款"
				return "拒绝借款"
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-item {
		padding: 40rpx 32rpx 40rpx 40rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;

		.head {
			margin-bottom: 30rpx;

			.avatar {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin-right: 23rpx;
			}

			.userinfo {

				.userinfo-name {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}

				.userinfo-bot {
					font-weight: 500;
					font-size: 26rpx;
					color: #222222;
					margin-top: 18rpx;

					.t1 {
						// margin-right: 30rpx;
					}

					.t2 {
						margin-right: 30rpx;
					}

					.t3 {
						margin-right: 30rpx;
					}
				}
			}

			.userinfo-status {
				width: 104rpx;
				height: 104rpx;
				border-radius: 50%;
				font-weight: 800;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-left: 31rpx;
			}

			.status1 {
				background: #67C28E;
			}

			.status2 {
				background: #EA6464;
			}
		}

		.career {

			.career-top {
				.career-flex {

					.career-item {
						margin-bottom: 40rpx;
						font-size: 28rpx;

						.career-item-label {
							color: #666;
							flex-shrink: 0;
						}

						.career-item-value {
							color: #222;
						}

					}

					.mb {
						margin-bottom: 0;
					}

					.career-item-last {
						margin-bottom: 0;
					}
				}

			}

			.career-btn {
				margin-top: 34rpx;

				.btn {
					width: 176rpx;
					height: 63rpx;
					background: #FB7979;
					border-radius: 10rpx;
					text-align: center;
					line-height: 63rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					margin-left: 24rpx;
				}

				.btn1 {
					background: #FB7979;
				}

				.btn2 {
					background: #1DB7FF;
				}

				.btn3 {
					background: #3A92FF;
				}
			}
		}
	}
</style>